<template>
  <div class="list">
    <!-- 面包屑导航 -->
    <Breadcrumb></Breadcrumb>
    <div class="header">
      <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="订单编号">
            <el-input v-model="formInline.name" size="small" placeholder="请选择订单编号"></el-input>
          </el-form-item>
          <el-form-item label="预定时间">
            <el-date-picker v-model="formInline.date" size="small" type="date" placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="group">
        <el-button size="small" type="warning" icon="el-icon-plus" @click="orderCollect">订单汇总</el-button>
        <!-- 导出表格 -->
        <download-excel class="export-excel-wrapper" :data="DetailsForm" :fields="json_fields" :header="title"
          name="订单列表.xlsx">
          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
          <el-button size="small" type="warning">导出</el-button>
        </download-excel>
      </div>
    </div>
    <!-- 表格 -->
    <div class="container">
      <el-table :data="tableData" border style="width: 100%,height:40px" header-row-class-name="active-header"
        @select="select">
        <el-table-column type="selection" width="55" align="center" :selectable="selectable">
        </el-table-column>
        <el-table-column prop="code" label="订单编号" width="180" align="center">
          <template slot-scope="scope">
            <span style="color:blue;cursor: pointer;" @click="orderDesc(scope.$index, scope.row)">{{ scope.row.code}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ordername" label="下单人" width="140" align="center">
        </el-table-column>
        <el-table-column prop="company" label="所属单位" width="180" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center">
        </el-table-column>
        <el-table-column prop="yudingTime" label="预定时间" width="210" align="center">
          <!-- <template slot-scope="scope">{{ dayjs(scope.row.yudingTime).format('YYYY-MM-DD') }}</template> -->
        </el-table-column>
        <el-table-column prop="price" label="订单总价" width="140" align="center">
        </el-table-column>
        <el-table-column prop="huizongStatus" label="汇总状态" width="140" align="center">
          <!-- {{ scope.row.huizongStatus == 1 ? '未汇总' : '已汇总' }} -->
          <template slot-scope="scope">
            <span v-if="scope.row.huizongStatus == '未汇总'" style="color:blue">未汇总</span>
            <span v-else style="color:red">已汇总</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <Pagination :total="total" :pageSize="pageSize" @currentChange="currentChange"></Pagination>
    <!-- 抽屉--列表详情 -->
    <OrderDesc ref="orderDesc"></OrderDesc>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import Pagination from '@/components/pagination/Pagination.vue'
import OrderDesc from './OrderDesc.vue'
export default {
  components: { Pagination, OrderDesc },
  data() {
    return {
      // 查询
      formInline: {},
      //表单数据
      tableData: [],
      total: 10,
      pageSize: 1,
      ids: [],//汇总商品id
      DetailsForm:[],
      json_fields:{
         // "订单编号": 'code',
          //数字处理--
          "订单编号":{
          field:"code",
          callback:value=>{
            return '&nbsp;'+value;
          }
        },
        "下单人":'ordername',
        "所属单位":'company',
        "联系电话":'phone',
        "预定时间":"yudingTime",
        "订单总价":"price",
        "汇总状态":"huizongStatus"
      },
      title:'订单数据'
    }
  },
  methods: {
    dayjs,
    //订单详情
    orderDesc() {
      this.$refs.orderDesc.drawer = true
    },
    //订单汇总
    orderCollect() {
      if (this.ids.length >= 2) {
        //订单汇总
        this.$api.changeStatus({ ids: this.ids.join(',') })
          .then(res => {
            if (res.data.status == 200) {
              this.orderList(1)
              this.$message({
                message: '汇总成功',
                type: 'success'
              });
            }
          })
      } else {
        this.$alert('至少需要两条订单信息', '订单汇总', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: ` 已取消汇总`
            });
          }
        });
      }
    },
    // 控制选择框状态
    selectable(row, index) {
      if (row.huizongStatus == '未汇总') {
        return true
      } else return false
    },
    //表格选择事件
    select(selection, row) {
      let arr = []
      selection.forEach(ele => {
        arr.push(ele.id)
      });
      
      this.ids = arr
      //存储当前的勾选行的数据信息------ 
      this.DetailsForm = selection;
    },
    // 获取订单列表
    async orderList(page) {
      let res = await this.$api.orderList({ page })
<<<<<<< HEAD
      // console.log('订单-----', res);
=======
      // //console.log('订单-----', res);
>>>>>>> e558facf022688ce3d835b65714b1b14b7cb08fa
      if (res.data.status == 200) {
        //this.tableData = res.data.data
        let arr = res.data.data;
        arr.forEach(ele=>{
          ele.huizongStatus = ele.huizongStatus==1?'未汇总':"已汇总"
          ele.yudingTime = dayjs(ele.yudingTime).format('YYYY-MM-DD')
        })
        this.tableData = arr;
        this.total = res.data.total
        this.pageSize = res.data.pagaSize
        //this.pageSize = 8
      } else {
        this.tableData = []
      }
    },
    // 获取分页页码
    currentChange(page) {
      this.orderList(page)
    }
  },
  created() {
    this.orderList(1)
  }
}
</script> 

<style lang="less" scoped>
.header {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;

  .el-form-item {
    margin-bottom: 14px;
  }

  .group {
    padding: 8px;
    border: 1px solid #eee;

    .export-excel-wrapper {
      display: inline-block;
      margin-left: 20px;
    }
  }
}

.container {
  /deep/.active-header {
    color: black;
  }
}
</style>
